@tailwind base;
@tailwind components;
@tailwind utilities;

/* ====== 页面工具类合并 ====== */

body { overflow-y: scroll; }


@layer utilities {
  /* 内容可见性 */
  .content-auto {
    content-visibility: auto;
  }
  
  /* 卡片阴影 */
  .shadow-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 过渡动画 */
  .transition-all-300 {
    transition: all 300ms ease-in-out;
  }
  
  /* 卡片悬停效果 */
  .card-hover {
    @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }
  
  /* 统计卡片 */
  .stat-card {
    @apply bg-white rounded-lg shadow-sm p-5 card-hover;
  }
  
  /* 进度条 */
  .progress-bar {
    @apply h-2 rounded-full bg-gray-200 overflow-hidden;
  }
  
  /* 进度值 */
  .progress-value {
    @apply h-full rounded-full transition-all duration-1000 ease-out;
  }
  
  /* 按钮样式 */
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
  }
  
  .btn-secondary {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200 transition-all;
  }
  
  /* 图表相关样式 */
  .chart-container {
    position: relative;
    transition: all 0.3s ease;
  }
  
  .chart-container:hover {
    transform: translateY(-2px);
  }
  
  .chart-btn {
    transition: all 0.2s ease;
  }
  
  .chart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .table-hover {
    transition: background-color 0.2s ease;
  }
  
  .chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6B7280;
  }
  
  .chart-loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #E5E7EB;
    border-top: 2px solid #3B82F6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  .chartjs-tooltip {
    background: rgba(0, 0, 0, 0.9) !important;
    border-radius: 8px !important;
    border: 1px solid #3B82F6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* 响应式图表 */
  @media (max-width: 768px) {
    .chart-container {
      height: 250px !important;
    }
  }
}
